export const DeleteIcon = (props) => (
  <svg
    xmlns='http://www.w3.org/2000/svg'
    width={24}
    height={24}
    fill='none'
    className='cursor-pointer'
    {...props}
  >
    <rect width={24} height={24} fill='#F5F5F5' rx={12} />
    <path
      fill='#727272'
      d='M10.8 8.049h2.4c0-.31-.126-.608-.351-.828A1.215 1.215 0 0 0 12 6.878c-.318 0-.623.123-.848.343-.226.22-.352.517-.352.828Zm-.9 0c0-.27.054-.536.16-.784.105-.249.26-.475.455-.665.195-.19.427-.341.681-.444a2.145 2.145 0 0 1 2.289.444c.195.19.35.416.455.665.106.248.16.515.16.784h3.45c.12 0 .234.046.318.128a.434.434 0 0 1 0 .621.456.456 0 0 1-.318.129h-.792l-.702 7.09a2.176 2.176 0 0 1-.727 1.413c-.415.367-.954.57-1.513.57h-3.632c-.559 0-1.098-.203-1.512-.57a2.176 2.176 0 0 1-.727-1.414l-.703-7.09H6.45a.456.456 0 0 1-.318-.128.434.434 0 0 1 0-.62.456.456 0 0 1 .318-.13H9.9Zm1.2 2.78a.434.434 0 0 0-.132-.31.456.456 0 0 0-.636 0 .434.434 0 0 0-.132.31v4.39c0 .117.047.229.132.31a.456.456 0 0 0 .636 0 .434.434 0 0 0 .132-.31v-4.39Zm2.25-.439c.12 0 .234.046.318.129a.434.434 0 0 1 .132.31v4.39a.434.434 0 0 1-.132.31.456.456 0 0 1-.636 0 .434.434 0 0 1-.132-.31v-4.39c0-.116.047-.228.132-.31a.456.456 0 0 1 .318-.129Zm-4.51 5.542c.033.326.188.628.437.848.248.22.572.342.907.342h3.632c.335 0 .659-.122.907-.342.249-.22.404-.522.437-.848l.694-7.005H8.146l.694 7.005Z'
    />
  </svg>
);
